<template>
  <el-tooltip effect="dark" :disabled="isShowTooltip" placement="top">
    <div class="ellipsis" @mouseover="handleMouseOver">
      <span ref="content">{{ (content || "") | filterTag }}</span>
    </div>
    <template #content>
      <div v-html="filteredContent"></div>
    </template>
  </el-tooltip>
</template>

<script>
export default {
  name: "TextTooltip",
  filters: {
    filterTag(val) {
      return val.replace(/<.*?>/gi, "");
    },
  },
  props: {
    // 显示的文字内容
    content: {
      type: String,
      default: "",
    },
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isShowTooltip: true,
    };
  },
  computed: {
    filteredContent() {
      return this.content.replace(/(\r\n)|(\n)/g, "<br>").replace(/\s/g, "&nbsp;");
    },
  },
  methods: {
    handleMouseOver() {
      const parentWidth = this.$refs.content.parentNode.offsetWidth;
      const contentWidth = this.$refs.content.offsetWidth;
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
  },
};
</script>
